﻿import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import moment from "moment";
import { Form, Input, Select, Button, DatePicker, Row, Col, Table,Modal,message,Popconfirm } from 'antd';
import './page1.scss'
import NetUitl from '../../utils/HttpUtil';
import "./page.scss";


class Page1 extends Component {
    constructor(props) {
        super(props);
        this.state={
            data:[],
            visible:false,
            modalOptions:[],
            initOptions:[],
            teamChange:{},

        }
    }

    componentDidMount(){
        this.selectUrl('data','/dailyReport/home')
        this.selectUrl('initOptions','/dict/getDepartment')
    }

    selectUrl = (option,url,param=null) =>{
        const self = this;
        NetUitl.get(url,param,function (data) {
            if(data.msgCode==='200'){
                self.setState({
                    [option]: data.data
                })
            }
        })
    }
    handleSubmit = e =>{
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            var url = ''
            if(!!values.date && !!values.teamId){
                values.date.format('YYYY-MM-DD')
                var d = moment(values.date).format('YYYY-MM-DD')
                url = `/dailyReport/home?date=${d}&teamId=${values.teamId}`
            }else if(!!values.teamId && !values.date) {
                url = `/dailyReport/home?teamId=${values.teamId}`
            }else if(!values.teamId && !!values.date){
                var d = moment(values.date).format('YYYY-MM-DD')
                url = `/dailyReport/home?date=${d}`;
            }else {
                url = `/dailyReport/home`
            }
            this.selectUrl('data',url,)

        });
    }
    addModal = () =>{
        var d = moment(parseInt(new Date().getTime())).format('YYYY-MM-DD');
        // const { teamChange } = this.state;
        const teamChange = {}
        teamChange.reportDate = d;
        this.selectUrl('modalOptions',`/dict/getDepartment?date=${d}`)
        this.setState({
            visible:true,
            teamChange:teamChange
        })
    }
    handleOk = e => {
        const { teamChange } = this.state
        if(!teamChange.teamName){
            message.error("请选择新建部门！")
            return false
        }
        teamChange.add = true;
        this.props.history.push({pathname:"/add",query:teamChange});
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    handleDelete = id =>{
        let self = this
        NetUitl.get(`/dailyReport/deleteById?id=${id}`,null,function (data) {
            if(data.msgCode==='200'){
                self.selectUrl('data','/dailyReport/home')
            }
        })
    }

    teamChange = v =>{
        const { teamChange, modalOptions } = this.state
        var teamName = '';
        modalOptions.map(item=>{
            if(item.dicId == v){
                teamName = item.dicName
            }
        })
        this.setState({
            teamChange:{
                teamId:v,
                teamName:teamName,
                reportDate:teamChange.reportDate
            }
        })
    }
    changeDate = d =>{
        var date = moment(d).format('YYYY-MM-DD')
        this.setState({
            teamChange:{
                reportDate:date
            }
        })
        this.selectUrl('modalOptions',`/dict/getDepartment?date=${date}`)
    }

    handleData = (time) =>{
        if(!time){
            return false
        }else{
            return time > moment()
        }
    }
    goresult(){
        // window.open('/index.html#/result/')
        window.location.href='/index.html#/resultall/'
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 4},
            wrapperCol: { span: 12 },
        };
        const columns = [
            {
                title: '部门',
                dataIndex: 'teamName',
                align:'center',
            },
            {
                title: '负责人',
                dataIndex: 'createBy',
                align:'center',
            },
            {
                title: '日报日期',
                dataIndex: 'reportDate',
                align:'center',
            },
            {
                title: '最新编辑时间',
                dataIndex: 'updateTime',
                align:'center',
            },
            {
                title: '操作',
                align:'center',
                dataIndex: 'doit',
                render:(text, record, index)=>{
                    const obj = {}
                    obj.id = record.id
                    obj.teamId = record.teamId
                    obj.teamName = record.teamName
                    obj.reportDate = record.reportDate
                    obj.add = false
                    var d = moment(parseInt(new Date().getTime())).format('YYYY-MM-DD');
                    return (
                        <div>
                            <p style={{marginBottom:0,textAlign:'center'}}>
                                <span style={{marginRight:'8px'}}><Link  to={{ pathname: '/add', query:obj}}>编辑</Link></span>
                                <span style={d == record.reportDate? {cursor:'pointer'} : {cursor:'not-allowed'} }>
                                    <Popconfirm
                                        placement="topRight"
                                        title={'确定删除当前部门日报！'}
                                        disabled={d == record.reportDate? false: true}
                                        onConfirm={this.handleDelete.bind(this,record.id)}
                                        okText="Yes"
                                        cancelText="No"
                                    >
                                        删除
                                    </Popconfirm>
                                </span>
                            </p>
                        </div>
                    )
                }
            },
        ];
        const { Option } = Select;
        const modalOption = this.state.modalOptions.map(item=><Option key={item.dicId}>{item.dicName}</Option>)
        const initOption = this.state.initOptions.map(item=><Option key={item.dicId}>{item.dicName}</Option>)
        const teamId = (!!this.state.teamChange && !!this.state.teamChange.teamId) ? this.state.teamChange.teamId : ""
        return (
            <div className='page1_box'>
                <div className='search_box'>
                    <Form layout="inline" onSubmit={this.handleSubmit}>
                        <Row>
                            <Col span={16}>
                                <Form.Item {...formItemLayout} label="部门">
                                    {getFieldDecorator('teamId',{})(<Select allowClear style={{width:'224px',marginRight:'24px'}}>{initOption}</Select>)}
                                </Form.Item>
                                <Form.Item {...formItemLayout} label="日期">
                                    {getFieldDecorator('date', {
                                    })(<DatePicker style={{width:'224px',paddingBottom:'4px'}} placeholder="请输入日期进行查询" />)}
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <div style={{float:'right'}}>
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit" style={{marginRight:'8px'}}>查询</Button>
                                    </Form.Item>
                                    <Form.Item>
                                        {/*<Button type="primary" style={{marginRight:'8px'}} onClick={this.goresult}>*/}
                                         <Button type="primary" style={{marginRight:'8px'}}>
                                            <Link  to={{ pathname: '/result', query:{toindex:'toindex'}}}>查看研发体系日报</Link>
                                            {/*查看研发体系日报*/}
                                        </Button>
                                    </Form.Item>
                                    <Form.Item>
                                        <Button type="primary" onClick={this.addModal} style={{marginRight:'8px'}}>新增</Button>
                                    </Form.Item>
                                </div>
                            </Col>
                        </Row>
                    </Form>
                </div>
                <div className='table_box'>
                    <Table dataSource={this.state.data} columns={columns} pagination={false} bordered={true} rowkey={'key'}/>
                </div>
                <Modal
                    title="请选部门"
                    visible={this.state.visible}
                    cancelText='取消'
                    okText='确定'
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    destroyOnClose={true}
                >
                    <div>
                        <p>日期：<DatePicker defaultValue={moment(new Date(), 'YYYY/MM/DD')} disabledDate={this.handleData} format={'YYYY/MM/DD'}  style={{width:'calc(100% - 60px)'}} onChange={this.changeDate}/></p>
                        <p>部门：<Select onChange={this.teamChange} value={teamId} style={{width:'calc(100% - 60px)'}} >{modalOption}</Select></p>
                    </div>
                </Modal>
            </div>
        );
    }
}
Page1 = Form.create({})(Page1);
export default Page1;
